.example-container {
  height: 400px;
  margin-bottom: 24px;
  width: 550px;
  max-width: 100%;
  overflow: auto;
}

h2 {
  margin: 0 0 16px;
}

table {
  width: 800px;
}

.example-sticky-columns {
  td {
    background-color: white;
  }

  td.mat-mdc-column-star {
    width: 20px;
    padding-right: 8px;
  }

  th.mat-mdc-column-position, td.mat-mdc-column-position {
    padding-left: 8px;
  }

  // Unlike with the classic MatTable, border-right does not work due to border-collapse.
  // Using :before to not conflict with popover-edit and column-resize which use :after.
  .mat-mdc-table-sticky:first-child,
  .mat-mdc-table-sticky:last-child {
    &::before {
      background-color: #e0e0e0;
      bottom: 0;
      content: '';
      position: absolute;
      top: 0;
      width: 1px;
    }
  }

  .mat-mdc-table-sticky:first-child::before {
    right: 0;
  }

  .mat-mdc-table-sticky:last-child::before {
    left: 0;
  }
}

.example-sticky-header {
  .mat-mdc-header-row th::before {
    background-color: #e0e0e0;
    bottom: 0;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
  }
}

.example-sticky-footer {
  td {
    background-color: white;
  }

  .mat-mdc-footer-row td::before {
    background-color: #e0e0e0;
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
}
